<template>
  <div>
    <TableContainer
        :columns="containerTableColumns"
        :serverUrl="containerServerUrl"
        :routeUrl="containerBaseUrl"
        :tableToolConfig="tableToolConfig"
        :searchProp="searchProp"
        ref="TableContainer"
        :titleProp="titleProp"
        :expand="true"
    >
        <template v-slot:tools>
          <router-link :to="containerBaseUrl + '/add'">
            <el-button type="primary" icon="el-icon-circle-plus-outline"
              >增加{{title}}</el-button
            >
          </router-link>
        </template>

        <template v-slot:expand="{props}">
          {{props.row}}
        </template>

        <template v-slot:columnSlotDataTool="{props}">
          <router-link :to="containerBaseUrl + '/add'">
            <el-button type="primary" icon="el-icon-circle-plus-outline">增加{{props.id}}</el-button>
          </router-link>
        </template>


        <template v-slot:table__footer__info>{{title}}列表</template>
    </TableContainer>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from 'vuex'

import { TableContainer } from "@/manager-core/page/container"

export default defineComponent({
  name: 'TableView',

  components: {
    TableContainer
  },

  data(){
    return {
      title: "书籍",
      containerTableColumns : [
        {
          prop: "pdate",
          label: "发布时期",
          width: "150px",
        },
        {
          prop: "name",
          label: "书名",
          width: "220px",
        },
        {
          prop: "writer",
          label: "作者",
          width: "130px",
        },
        {
          prop: "publisher",
          label: "出版社",
          width: "200px",
        }
      ],

      containerBaseUrl : "/views/tablep",
      containerServerUrl : "/api/manager/t-demo",
      tableToolConfig : {
          canEdit: true,
          canRecover: true,
          canDelete: true,
          canDisable: true,
      },

      searchProp: 'name',  // 搜索对应的字段名
      titleProp: 'name',  // 数据对应的字段名
    }
  },

  methods:{
    init(){

    }
  },

  mounted(){
    console.log("muser")
  },

  setup(){
    // const store = useStore()

    // return {
    //   LoginByUsername:(userObj:any)=> store.dispatch('LoginByUsername')
    // }

  }


})



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
</style>
